<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Bootstrap v3.3.4 核心 CSS 文件 -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery.min.js"></script>
<!-- Bootstrap v3.3.4 核心 JavaScript 文件 -->
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/sqh_style_v2.0.css">
<script src="../js/iscroll.js"></script>
<script src="../js/sqh_js_v2.0.js"></script>
<script src="../js/sqh_jscroll.js"></script>
<title>商品列表</title>

<style>
    .search_cont {
        width: 32%;
        height: 35px;
    }

    .search_cont .in_search {
        outline: none;
        height: 35px;
        float: left;
        border: 0;
        z-index: 1;
        box-shadow: none;
    }

    div.active{
        border-bottom: 3px solid #e5005a;
    }
    div.active span.title{
        color:#e5005a;
    }
</style>

<script type="text/javascript">
/**
 * 滚动翻页 （自定义实现此方法）
 * myScroll.refresh();		// 数据加载完成后，调用界面更新方法
 */
function pullUpAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('thelist');
		var num = 3;
		for (i=0; i<num; i++) {
			//$("#thelist").append("<div class='media shop_list'><div class='media-left'><a href='#'><img class='media-object '  width='100' src='img/ex_img/03.png' alt=''   data-holder-rendered='true' ></a></div><div class='media-body'><a href='#' class='a_color_56'><h5 class='media-heading'>王品台塑牛排</h5></a><h6 class='a_color_99'>仅售368元，价值599元双人套餐，免费WiFi！免费提供20个停车位！</h6><div class='row'><span class='col-xs-7 height_35'><span class='sqh-tmp-color'>￥368</span><del class='a_color_99 padding_left_10'><small>￥599</small></del></span><span class='col-xs-5 text-right padding-left-0'><button class='btn btn-default sqh_tmp_bg_2d sqh_tmp_color_fff sqh_tmp_border_color_2d sqh_btn_radius35' type='button'>即将开抢</button></span></div></div></div><div class='row border_b_eee'></div>");
			$("#thelist").append("<div class='media shop_list'><div class='media-left'><a href='#'><img class='media-object '  width='100' src='img/ex_img/03.png' alt=''   data-holder-rendered='true' ></a></div><div class='media-body'><a href='#' class='a_color_56'><h5 class='media-heading'>王品台塑牛排</h5></a><h6 class='a_color_99'>仅售368元，价值599元双人套餐，免费WiFi！免费提供20个停车位！</h6><div class='row'><span class='col-xs-7 height_35'><span class='sqh-tmp-color'>￥368</span><del class='a_color_99 padding_left_10'><small>￥599</small></del></span><span class='col-xs-5 text-right padding-left-0'><button class='btn btn-default sqh_tmp_bg_2d sqh_tmp_color_fff sqh_tmp_border_color_2d sqh_btn_radius35' type='button'>即将开抢</button></span></div></div></div><div class='row border_b_eee'></div>");
		}
		myScroll.refresh();		// 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}
</script>
</head>
<body>
<div class="container-fluid sqh_bg_fafafa">

    <!-- 头部导航 -->
    <div class="row sqh_relative sqh_tmp_bj_ff">

        <a href="http://www.baidu.com">
            <div class="bg-sqh-tmp-color sqh-tmp-top col-xs-3">
                <span class="icon iconfont  sqh_tmp_color_e5 sqh_font_color_red" aria-hidden="true">&#xe608;</span>
            </div>
        </a>

        <div class="col-xs-6 bg-sqh-tmp-color sqh-tmp-top text-center sqh-tmp-color">
            <span class="dropdown-toggle sqh-tmp-color font_18" data-toggle="dropdown" role="button"
                  aria-expanded="false">惠团购</span>
        </div>

        <div class="col-xs-3 bg-sqh-tmp-color sqh-tmp-top text-right sqh_tmp_color_e5">
            <span class="padding_right_10">
                <span class="icon iconfont " aria-hidden="true">&#xe638;</span>(<span id="goodsNum">0</span>)
            </span>
        </div>

        <!-- 筛选导航栏 -->
        <div class="border_b_bottom_3eee text-center width_33 float_left active" style="z-index: 999">
            <div class="margin_bottom_10 margin_top_10 ">
                <span onclick="showOrHideItem(this,event)" class="title">
                    分类
                    <span class="caret"></span>
                </span>
                <ul class="list-unstyled all_width sqh_absolute sqh_line_height_25 sqh_tmp_bj_ff border_b_bottom_eee sqh_position_top_100 sqh_position_left_0 display_none" data-show="hide" style="z-index: 999;">
                    <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick="jumpTo(this)" target="https://www.baidu.com">
                        <div class="float_left">家政</div>
                        <div class="float_right icon iconfont sqh_line_height_15">&#xe60e;</div>
                        <div class="clearfix"></div>
                    </li>
                    <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick="jumpTo(this)" target="https://www.baidu.com">
                        <div class="float_left">蔬菜</div>
                        <div class="float_right icon iconfont sqh_line_height_15">&#xe60e;</div>
                        <div class="clearfix"></div>
                    </li>
                    <li class=" margin_left_10 margin_right_10 sqh_pointer sqh_font_color_red" onclick="jumpTo(this)" target="https://www.baidu.com">
                        <div class="float_left">零食</div>
                        <div class="float_right icon iconfont  sqh_line_height_15">&#xe60e;</div>
                        <div class="clearfix"></div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="text-center border_b_bottom_3eee width_33 float_left">
            <div class="margin_bottom_10 margin_top_10 border_b_right_eee">
                <span onclick="showOrHideItem(this,event)" class="title">
                    价格
                    <span class="caret"></span>
                </span>
                <ul class="list-unstyled all_width sqh_absolute sqh_line_height_25 sqh_tmp_bj_ff border_b_bottom_eee" data-show="hide" style="top:100%;left: 0px;z-index: 999;display: none">
                    <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick="jumpTo(this)" target="https://www.baidu.com">
                        <div class="float_left">家政1</div>
                        <div class="float_right icon iconfont sqh_line_height_15">&#xe60e;</div>
                        <div class="clearfix"></div>
                    </li>
                    <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee sqh_font_color_red" onclick="jumpTo(this)" target="https://www.baidu.com">
                        <div class="float_left">蔬菜1</div>
                        <div class="float_right icon iconfont sqh_line_height_15">&#xe60e;</div>
                        <div class="clearfix"></div>
                    </li>
                    <li class=" margin_left_10 margin_right_10 sqh_pointer" onclick="jumpTo(this)" target="https://www.baidu.com">
                        <div class="float_left">零食1</div>
                        <div class="float_right icon iconfont  sqh_line_height_15">&#xe60e;</div>
                        <div class="clearfix"></div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="text-right border_b_bottom_3eee text-center width_34 float_left sqh_overflow_hidden">

            <div class="sqh_line_height_25 sqh_tmp_bj_ff margin_left_10" id="fangdajing" style="height: 34px;margin-top: 3px;margin-bottom: 3px;" onclick="showSearch(this,event);">
                <div class="sqh_absolute " style="width: 32%;">
                    <div class="float_right" style="width: 70px;">
                        <button type="button" class="btn btn-e4005a float_left display_none margin_left_10" style="padding: 4px 12px;" onclick="searchContent(this,event)">搜索</button>
                    </div>
                    <div class="input_div" style="">
                        <span class="icon iconfont font_14 sqh_absolute padding_left_5" style="left: 0px;top:0px;">&#xe606;</span>
                        <input class="all_width padding_left_30 sqh_tmp_bj_f3 sqh_border_radius_20 clear_border"
                               placeholder="搜索" onclick="" type="text" value=""
                               style="height: 35px;float: left;margin-right: 5px;">
                    </div>
                </div>
            </div>

        </div>

    </div>

    <!-- 循环的商品列表 -->
    <div id="wrapper" class="padding-left-15 padding_right_15" style="top:100px;">

        <div id="scroller">
            <ul id="thelist" class="padding_top_10">


                <div id="user_tips" class="display_none">
                    <div class="media shop_list ">
                        <a href="http://www.baidu.com">半价集市致客户信</a>
                    </div>
                    <div class="row border_b_eee "></div>
                </div>


                <div class="media shop_list">
                    <div class="media-left sqh_relative">
                        <a href="#">
                            <img class="media-object " width="100" src="img/ex_img/01.png" alt=""
                                 data-holder-rendered="true">

                            <div class="sqh_steal_75"><span>已抢光</span></div>
                        </a>
                    </div>
                    <div class="media-body">
                        <a href="#" class="a_color_56"><span class="media-heading font_16">一级蒙自石榴云南甜石榴...</span></a>

                        <div class="">
                            <span class="a_color_99 font_14 padding_top_10" title="专注品质，严格经过人工精挑细选，皮薄软籽汁多，单果约350g左右">专注品质，严格经过人工精挑细选，皮薄...</span>
                        </div>
                        <div class="padding_top_10">
                            <button type="button" class="btn btn-xs btn-e5005a_kx margin_right_10">首日特惠</button>
                            <button type="button" class="btn btn-xs btn-e5005a_kx">全城配送</button>
                        </div>
                        <div class="row">
                            <span class="col-xs-7 height_35"><span class="sqh-tmp-color font_16">￥59</span><del
                                    class="a_color_99 padding_left_10">
                                <small>￥128</small>
                            </del></span>
			<span class="col-xs-5 text-right padding-left-0">
				<button class="btn btn-default  sqh_font_color_red sqh_tmp_border_color_fdd sqh_btn_radius35 bg-sqh-tmp-color"
                        type="button">进行中
                </button>
			</span>
                        </div>
                    </div>
                </div>
                <div class="row border_b_eee"></div>

                <div class="media shop_list">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object " width="100" src="img/ex_img/02.png" alt=""
                                 data-holder-rendered="true">
                        </a>
                    </div>
                    <div class="media-body">
                        <a href="#" class="a_color_56"><span class="media-heading font_16">小台农芒果2kg 芒果 新鲜水果</span></a>

                        <div class="">
                            <span class="a_color_99 font_14 padding_top_10">芒香满溢，细腻多汁，香甜润滑</span>
                        </div>
                        <div class="padding_top_10">
                            <button type="button"
                                    class="btn btn-default btn-xs sqh_tmp_border_color_e5 sqh_btn_radius35 sqh_tmp_color_e5 margin_right_10">
                                全城配送
                            </button>
                        </div>
                        <div class="row">
                            <span class="col-xs-7 height_35"><span class="sqh-tmp-color font_16">￥59</span><del
                                    class="a_color_99 padding_left_10">
                                <small>￥128</small>
                            </del></span>
			<span class="col-xs-5 text-right padding-left-0">
				<button class="btn btn-default  sqh_font_color_red sqh_tmp_border_color_fdd sqh_btn_radius35 bg-sqh-tmp-color"
                        type="button">进行中
                </button>
			</span>
                        </div>
                    </div>
                </div>
                <div class="row border_b_eee"></div>

                <div class="media shop_list">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object " width="100" src="img/ex_img/03.png" alt=""
                                 data-holder-rendered="true">
                        </a>
                    </div>
                    <div class="media-body">
                        <a href="#" class="a_color_56"><span class="media-heading font_16">王品台塑牛排</span></a>

                        <div class="">
                            <span class="a_color_99 font_14">仅售368元，价值599元双人套餐，免费WiFi！免费提供20个停车位！</span>
                        </div>
                        <div class="row">
                            <span class="col-xs-7 height_35"><span class="sqh-tmp-color font_16">￥368</span><del
                                    class="a_color_99 padding_left_10">
                                <small>￥599</small>
                            </del></span>
			<span class="col-xs-5 text-right padding-left-0">
				<button class="btn btn-2d" type="button">即将开抢</button>
			</span>
                        </div>
                    </div>
                </div>
                <div class="row border_b_eee"></div>

                <div class="media shop_list">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object " width="100" src="img/ex_img/04.png" alt=""
                                 data-holder-rendered="true">
                        </a>
                    </div>
                    <div class="media-body">
                        <a href="#" class="a_color_56"><span class="media-heading font_16">果郡王大连美早樱桃2斤</span></a>

                        <div class="">
                            <span class="a_color_99 font_14">藕，属睡莲科植物。藕微甜而脆，可生食也可煮食，是常用餐菜之一。</span>
                        </div>
                        <div class="row">
                            <span class="col-xs-7 height_35"><span class="sqh-tmp-color font_16">￥368</span><del
                                    class="a_color_99 padding_left_10">
                                <small>￥599</small>
                            </del></span>
			<span class="col-xs-5 text-right padding-left-0">
				<button class="btn btn_999999_btn" type="button">已结束</button>
			</span>
                        </div>
                    </div>
                </div>
                <div class="row border_b_eee"></div>


                <div class="media shop_list">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object " width="100" src="img/ex_img/04.png" alt=""
                                 data-holder-rendered="true">
                        </a>
                    </div>
                    <div class="media-body">
                        <a href="#" class="a_color_56"><span class="media-heading font_16">果郡王大连美早樱桃2斤</span></a>

                        <div class="">
                            <span class="a_color_99 font_14">藕，属睡莲科植物。藕微甜而脆，可生食也可煮食，是常用餐菜之一。</span>
                        </div>
                        <div class="row">
                            <span class="col-xs-7 height_35"><span class="sqh-tmp-color font_16">￥368</span><del
                                    class="a_color_99 padding_left_10">
                                <small>￥599</small>
                            </del></span>
			<span class="col-xs-5 text-right padding-left-0">
				<button class="btn btn-default sqh_tmp_bg_99 sqh_tmp_color_fff sqh_tmp_border_color_99 sqh_btn_radius35"
                        type="button">已结束
                </button>
			</span>
                        </div>
                    </div>
                </div>
                <div class="row border_b_eee"></div>

            </ul>
            <div id="pullUp">
                <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
            </div>
        </div>
    </div>



</div>
</body>

</html>

<script type="text/javascript">

    var screenWidth = getScreenWidth();

    $(function(){

        $("#user_tips").fadeIn("slow");
        window.setTimeout(function(){
            $("#user_tips").fadeOut("slow",function(){
                $(this).remove();
            });
        },3000);

        //关闭搜索
        $(document).on("click",function(){
            closeItem();
        });

        //关闭放大镜
        $(document).on("click",function(){
            closeFangdajing()
        });

    });

    //收缩筛选下拉列表
    function closeItem(){
        $("ul[data-show]").attr("data-show","hide").slideUp("slow");
    }

    //关闭查找按钮
    function closeFangdajing(){
        var $obj = $("#fangdajing");
        $obj.find("button").removeClass("display_block").addClass("display_none");
        $obj.find("div.input_div").css("margin-right","0px");
        $obj.children("div").css("left","auto").animate({
            width: "32%",
            right:0
        }, 1000 );
    }

    //显示或关闭筛选条件
    function showOrHideItem(obj,event){
//                alert(arguments.callee);
//                alert(showOrHideItem.caller);
        var $currentObj = $(obj);
        //隐藏所有的下拉列表
        $("ul[data-show='show']").hide();
        //清除所有active类
        $currentObj.closest(".row").find("div.active").removeClass("active");
        //给当前div添加选中样式
        $currentObj.closest(".float_left").addClass("active")

        var $ul = $currentObj.closest("div").find("ul");
        //ul是展开状态,让其收缩
        if($ul.attr("data-show") == "show"){
            $ul.slideUp("slow");
            $ul.attr("data-show","hide");
        }else{
            //ul是收缩状态,让其展开
            $ul.slideDown("slow");
            $ul.attr("data-show","show");
            //阻止事件冒泡
            event.stopPropagation();
        }
    }

    //隐藏弹出层
    function hideItem(obj){
        var $currentObj = $(obj);
        var $ul = $currentObj.closest("div").find("ul");
        $ul.slideUp("slow");
    }

    function getOffset(obj){
        var leftOffset = $(obj).closest(".sqh_relative").get(0).offsetLeft;
        var screenWidth = getScreenWidth();
        $(obj).css("left","-"+leftOffset+"px");
    }

    //展示搜索框
    function showSearch(obj,event){
        closeItem();

        var $currentObj = $(obj).find("div.sqh_absolute");
        $currentObj.css("right","0");
        $currentObj.find("button").removeClass("display_none").addClass("display_block");
        $currentObj.find("div.input_div").css("margin-right","70px");
        $currentObj.animate({
            width: "100%",
            right:0
        }, 1000 );

        //阻止事件冒泡
        event.stopPropagation();
    }

    function stopEvent(obj,event){
        //阻止事件冒泡
        event.stopPropagation();
    }

    function searchContent(obj,event){
        closeFangdajing();
        //阻止事件冒泡
        event.stopPropagation();
    }

</script>

